iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
0
Modern Web

從前端走到設計,下一步?系列 第 4

Day4-你以為很簡單的 UI 設計

  • 分享至 

  • xImage
  •  

網頁設計的預處理分成幾個階段:Wireframe、Mockup、Prototype,翻譯都叫「原型」,但其實是有分層次的。(以下舉蝦皮 app 為例子)

1. Wireframe 線稿

如果你想開發一個網頁或 app,當然不可能一開始就設計出這種圖:

(圖片取自蝦皮 app 截圖)

應該會先想好要有什麼功能,大概要放在哪邊,頁面流程大概會須要怎麼進行,這個時候不需要太精緻的圖,重點要放在「流程」。就算是很美的介面,難用的流程也會讓使用者離開。這也是 Wireframe 的意義,先讓自己先搞懂流程按鈕,頁面要如何移轉進行。因此畫出來的圖不需要很精緻,越粗糙越省時越好,請把精力花在流程設計上吧!

(圖片為本人設計)
這就是線稿的概念,只需要看得懂應該出現的東西會在哪邊,哪個按鈕可以連結到什麼樣的頁面即可。

2. Mockup 精稿

精稿顧名思義就是要把所有東西都呈現出來,在線稿確定沒問題後,就要花時間設計精稿,這時候才需要把心思精力花費在配色、美編等等,此階段需要在不影響原本的框架情況下去做加工設計。這個時候更必須去思考什麼樣的按鈕位置跟顏色可以促進點擊率,這也就是 UI/UX 的學問。Mockup 會跟你未來的 app 長的一模一樣,也就是上面第一張圖的樣子。

3. Protytype 原型

到了這個階段就是工程師開始 coding 的時候啦,基本上到這個時候前面確認的功能、流程,甚至是按鈕位置都不應該再做更動,但是事實上有很多(突然想到的功能)會在這個時候被加上去,這也是為什麼工程師常常被說爆肝的原因,因為前面沒做好的都是後人要承擔啊 (#

UI 如何下手

最常拿來畫 UI 的兩大工具分別為 iOS 的 Sketch,以及 Adobe 的 XD,由於我不是蘋果使用者,因此我都是拿 Adobe XD 來使用。Adobe 這套軟體也非常佛心,是完全免費下載的,除了想要增加線上文件的公開數量需要付費之外,免費的部分基本上功能都非常齊全。也因為這套軟體非常新,因此更新頻率非常高,官方有持續新增功能讓整個軟體更加完善。


上一篇
Day3-寫程式寫到哭,於是轉換跑道
下一篇
Day5-跪著也要畫完的 Daily UI 100
系列文
從前端走到設計,下一步?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言